<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>object元素学习</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        .page {
            border: 1px solid red;
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 800px;
        }
    </style>
</head>
<body>
<div class="page">
    <h1>网页嵌入pdf</h1>
    <button id="btn">改变父容器大小</button>
    <br/>
    <br/>
    <!--通过object元素加载媒体资源-->
    <object type="application/pdf"
            data="./%5B图灵程序设计丛书%5D.JavaScript高级程序设计.第4版.pdf"
            width="100%"
            height="700">
    </object>
    <!-- 通过定位使得object元素撑满父容器的大小，因为object元素包含全局属性所以可以拿到window，实现间接监听父元素大小变化 -->
    <object id="objectContant"
            tabindex="-1"
            type="text/html"
            aria-hidden="true"
            data="about:blank"
            style="display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border: none;
            padding: 0px;
            margin: 0px;
            opacity: 0;
            z-index: -1000;
            pointer-events: none;">
    </object>
    <footer>这是页脚</footer>
</div>
</body>
</html>
<script>
    let objectContant = document.querySelector("#objectContant");
    let btn = document.querySelector("#btn");

    btn.onclick = () => {
        objectContant.style.height = '1200px'
    }

    // objectContant.contentDocument.defaultView的返回值就是window。
    console.log(objectContant.contentDocument.defaultView)
    objectContant.contentDocument.defaultView.addEventListener("resize", () => {
        console.log('元素大小发生了变化')
    })

    // vue中通过ref获取dom
    // this.$refs["objectRef"].contentDocument.defaultView.addEventListener("resize", () => {
    //     console.log('元素大小发生了变化')
    // });
</script>